<template>
  <view class="signature allColumnCenter">
    <header-title ref="headerTitle" isDisplayBack title="签名" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <view class="signature_textare mt-25">
      <textarea class="signature_textare_class" v-model="signatureValue" maxlength="18" autofocus="true"
                placeholder="请输入签名"
                placeholder-class="signature_textarePlaceholder" auto-height=""></textarea>
    </view>
    <view class="signature_tips mt-10 alignItemsCenter justify-between">
      <view class="signature_tips_left ml-14">
        <text class="signature_tips_left_text">输入字符最多输入18字</text>
      </view>
      <view class="signature_tips_right mr-14">
        <text class="signature_tips_right_text">{{ signatureValue.length }}/18</text>
      </view>
    </view>
    <view class="signature_button alignItemsCenter justify-end mt-25">
      <view class="signature_tips_button_class allRowCenter mr-14" @click="setSignature">
        <text class="signature_tips_button_class_text">保存</text>
      </view>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import {updateMemberImage} from "../../api/shiqinAPI";

export default {
  components: {HeaderTitle},
  data() {
    return {
      headerHeight: 0,
      signatureValue: '',
      options:{}
    };
  },
  onLoad(options) {
    this.options = options
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    getPageHeight(number) {
      this.headerHeight = number
    },
    async setSignature() {
      if (!this.signatureValue) {
        uni.showToast({
          title: '请输入签名',
          icon: 'none'
        })
        return
      }
      let {status, msg} = await updateMemberImage({
        member_id: this.options.member_id,
        autograph: this.signatureValue
      })
      if(status === 200){
        uni.showToast({
          title: '保存成功',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1000)
      }else{
        uni.showToast({
          title: msg,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.signature {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .signature_textare {
    width: 661rpx;
    background: #EDEDED;
    border-radius: 17rpx 17rpx 17rpx 17rpx;
    padding: 16rpx 14rpx;
    overflow: hidden;

    .signature_textare_class {
      width: 633rpx;
      min-height: 202rpx;
    }

    .signature_textarePlaceholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #4B4B4B;
    }
  }

  .signature_tips {
    width: 661rpx;

    .signature_tips_left {
      .signature_tips_left_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }

    .signature_tips_right {
      .signature_tips_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #4B4B4B;
      }
    }
  }

  .signature_button {
    .signature_tips_button_class {
      width: 133rpx;
      height: 48rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      .signature_tips_button_class_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }
  }
}
</style>
